Skip to content

CMS-204 | Rework inline MDX props editor UI to be visually lighter and more intuitive#100

Merged
woywro merged 3 commits intomainfrom
CMS-204
Apr 16, 2026
Merged

CMS-204 | Rework inline MDX props editor UI to be visually lighter and more intuitive#100
woywro merged 3 commits intomainfrom
CMS-204

Conversation

@woywro
Copy link
Copy Markdown
Collaborator

@woywro woywro commented Apr 16, 2026 •
edited by coderabbitai bot
Loading

Summary by CodeRabbit

  • New Features
    • Added edit and delete actions for MDX components, plus a drag handle for reordering
    • Visual selection state with updated left-border and background styling
  • Bug Fixes
    • Stabilized form-field control identity so controls no longer remount when values change
    • Removed previous local-preview / unavailable/read-only guidance from component frames
  • Tests
    • Updated/added tests for rendering, action buttons, and selection styling

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 16, 2026 •
edited
Loading

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3026d4ec-94dd-40f1-b99a-b13ee7a1dbde

📥 Commits

Reviewing files that changed from the base of the PR and between 66c4b47 and 0bb6238.

📒 Files selected for processing (1)
  • packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.tsx
📝 Walkthrough

Walkthrough

Stabilized React keys for form controls to stop remounts on value changes; added selection state, drag handle, and conditional edit/delete actions to MDX component node frames; simplified void-node rendering and removed several preview/placeholder messages; updated tests to match the new UI and behaviors.

Changes

Cohort / File(s) Summary
Form control key stabilization
packages/studio/src/lib/mdx-props-editor-host.tsx		 Replaced value-dependent composite key values with stable controlId for multiple control types (input, textarea, select, slider, checkbox), changing React remount behavior when inputs update.
Component node frame UI & interactions
packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.tsx		 Added selected?: boolean, onEditProps?: () => void, onDelete?: () => void; introduced hover drag handle, chip-style header showing <ComponentName />, conditional edit/delete buttons wired to editor commands, selection-based styling, and removed prior preview/placeholder messages and void-content rendering.
Component node frame tests
packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.test.tsx		 Updated expectations to assert escaped self-closing tag labels, removed prior guidance text checks, added assertions for presence/absence of edit/delete aria-labels based on callbacks, and added style-state assertions for selected true/false.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Frame as MdxComponentNodeFrame
  participant Editor as Editor (commands)
  participant NodeAPI as Node API

  User->>Frame: click "Edit props" button
  Frame->>Editor: setNodeSelection(pos)
  Editor->>Frame: selection updated (selected=true)
  User->>Frame: click "Delete" button
  Frame->>NodeAPI: deleteNode()
  NodeAPI->>Frame: node removed / UI updated
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Poem

🐰 Keys snug as buttons, no more frantic remount,
frames don a handle and buttons to count.
I nibble at props, select, and delete with glee,
voids fade away — tidy as can be.
Hooray for small rabbits and cleaner MDX tree! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main objective of the changeset: reworking the inline MDX props editor UI to be visually lighter and more intuitive, which aligns with the substantive changes across mdx-component-node-view files.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch CMS-204

Comment @coderabbitai help to get the list of available commands and usage tips.

@woywro woywro merged commit 425652f into main Apr 16, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@woywro